<!--时间轴列表begin-->
<div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">今日工作时间轴</h3>
    <button class="btn btn default" (click)="popModal()">添加</button>
  </div>
  <div class="box-body table-responsive no-padding">
    <div class="table-responsive">
      <table class="table table-hover table-striped table-bordered">
        <tbody>
        <tr *ngFor="let item of listData">
          <td>{{item.time ? item.time: ""}}</td>
          <td>{{item.matter ? item.matter: ""}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div [style.display]="loading?'block':'none'" class="overlay">
    <i class="fa fa-refresh fa-spin"></i>
  </div>
</div>
<!--时间轴列表end-->

<!--模态框begin-->
<div class="modal fade" [ngClass]="modalClass">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeModal()">
          <span aria-hidden="true">×</span></button>
        <h4 class="modal-title"> 提醒内容</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="title" class="col-sm-2 control-label">提醒标题:</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" [(ngModel)]="modalModel.title" name="title" id="title">
            </div>
          </div>
          <div class="form-group">
            <label for="time" class="col-sm-2 control-label">提醒时间:</label>
            <div class="col-sm-7">
              <div class="input-group bootstrap-timepicker timepicker">
                <input type="text" class="form-control input-small" id="time" name="time">
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="checkbox icheck">
                <label>
                  <input type="checkbox" id="repeat" name="repeat" [checked]="modalModel.repeat"
                         (click)="modalModel.repeat= $event.checked"> 重复
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="participant" class="col-sm-2 control-label">参与人:</label>
            <div class="col-sm-10">
              <select class="form-control select2" multiple="multiple" id="participant" name="participant"
                      style="width: 100%;">
                <option>张三</option>
                <option>李四</option>
                <option>王五</option>
                <option>魏六</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="remark" class="col-sm-2 control-label">备注：</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="remark" name="remark" [(ngModel)]="modalModel.remark"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="addTimelineData()">保存</button>
        <button type="button" class="btn btn-default" (click)="closeModal()">关闭</button>
      </div>
    </div>
  </div>
</div>
<!--模态框end-->
